<template>
  <div class="detail" v-if="show">
    <div class="icons">
      <div class="iconItem">
        <i class="iconfont icon-share"></i>
      </div>
      <div class="iconItem" @click="close">
        <i class="iconfont icon-cross"></i>
      </div>
    </div>
    <div class="swipe">
      <img v-lazy="currentCommodity.imgUrl" />
    </div>
    <div class="sku" ref="sku_scroll">
      <div class="wrapper">
        <span class="title">{{ currentCommodity.commodityName }}</span>
        <span class="desc">产品描述</span>
        <span class="desc">
          {{ currentCommodity.commodityDesc }}
          <br />
          <div v-for="(item, index) in parseJson" :key="index">
            *&nbsp;{{ item }}
            <br />
          </div>
        </span>
        <div class="states" v-for="(item, index) in keys" :key="index">
          <span class="state">{{ item }}</span>
          <div class="state_items">
            <div
              class="state_item"
              :class="{ state_item_active: attribute.selected }"
              v-for="attribute in attributes[item]"
              :key="attribute.attribute_id"
              @click="selectAttribute(attribute.value, item)"
            >
              {{ attribute.value }}
              <van-icon
                v-if="attribute.recommend == 1 && attribute.selected"
                class="icon-size11"
                name="star"
              />
              <van-icon
                v-if="attribute.recommend == 1 && !attribute.selected"
                class="icon-size11"
                name="star-o"
              />
            </div>
          </div>
        </div>
        <div class="evaluate">
          <span class="state">产品热评</span>
          <div class="evaluate_card">
            <div class="left">
              <van-image
                round
                fit="cover"
                width="0.6rem"
                height="0.6rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </div>
            <div class="right">
              <div class="header">
                <div class="name">
                  <span>123</span>
                  <van-rate
                    v-model="value"
                    size="0.35rem"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                </div>
                <div class="up">
                  <span>40</span>
                  <van-icon
                    name="good-job-o"
                    color="#333"
                    class="font20"
                  />
                </div>
              </div>
              <div class="content">
                阿斯顿纳斯到时发恼骚是丢啊十大撒开绿灯十大打算发生发生
              </div>
              <div class="imgs">
                <van-image
                  class="img"
                  width="2rem"
                  height="2rem"
                  fit="cover"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
                <van-image
                  class="img"
                  width="2rem"
                  height="2rem"
                  fit="cover"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
                <van-image
                  class="img"
                  width="2rem"
                  height="2rem"
                  fit="cover"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
                <van-image
                  class="img"
                  width="2rem"
                  height="2rem"
                  fit="cover"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
              </div>
            </div>
          </div>
          <div class="evaluate_card">
            <div class="left">
              <van-image
                round
                fit="cover"
                width="0.6rem"
                height="0.6rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </div>
            <div class="right">
              <div class="header">
                <div class="name">
                  <span>123</span>
                  <van-rate
                    v-model="value"
                    size="0.35rem"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                </div>
                <div class="up">
                  <span class="red">40</span>
                  <van-icon
                    name="good-job"
                    color="#df5359"
                    class="font20"
                  />
                </div>
              </div>
              <div class="content">
                阿斯顿纳斯到时发恼骚是丢啊十大撒开绿灯十大打算发生发生
              </div>
              <div class="imgs">
                <van-image
                  class="img"
                  width="2rem"
                  height="2rem"
                  fit="cover"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="add_sku">
      <div class="price_num">
        <div class="price_num_left">
          <span>￥{{ currentCommodity.price }}</span>
          <div>{{ selectedAttribute }}</div>
        </div>
        <div class="price_num_right">
          <van-icon name="minus" />
          <div class="round reduce" @click="reduceNum">
            <i class="iconfont icon-jian1 icon-font"></i>
          </div>
          <div class="num">{{ num }}</div>
          <div class="round add" @click="addNum">
            <i class="iconfont icon-jia icon-font"></i>
          </div>
        </div>
      </div>
      <div class="btn" @click="addCart">加入购物袋</div>
    </div>
  </div>
</template>

<script>
import commodityApi from "@/api/commodity";

import Vue from "vue";
import {
  Swipe,
  SwipeItem,
  Lazyload,
  Icon,
  Image as VanImage,
  Rate,
} from "vant";

import BScroll from "better-scroll";

Vue.use(Swipe).use(SwipeItem).use(Lazyload).use(Icon).use(VanImage).use(Rate);
export default {
  name: "detail",
  data() {
    return {
      num: 1,
      sku_scroll: null,
      parseJson1: null,
      keys: [],
      attributes: [],
      value: 5,
    };
  },
  props: {
    currentCommodity: {
      type: Object,
      default: {},
    },
    show: Boolean,
  },
  watch: {
    show(newValue, oldValue) {
      if (newValue) {
        this.getAttributeByIds();
      }
    },
  },
  computed: {
    parseJson() {
      if (this.show) {
        this.parseJson1 = JSON.parse(this.currentCommodity.characteristic);
        return this.parseJson1;
      }
      return this.parseJson1;
    },
    selectedAttribute() {
      var attributes = "";
      var index = 0;
      this.keys.forEach((key) => {
        for (var i = 0; i < this.attributes[key].length; i++) {
          if (this.attributes[key][i].selected) {
            if (index == this.keys.length - 1) {
              attributes += this.attributes[key][i].value;
            } else {
              attributes += this.attributes[key][i].value + ",";
            }
          }
        }
        index++;
      });
      return attributes;
    },
  },
  methods: {
    // 初始化bs
    initSiderScroll() {
      this.sku_scroll = new BScroll(this.$refs.sku_scroll, {
        click: true,
        scrollY: true,
        bindToWrapper: true,
        probeType: 3,
        scrollbar: {
          fade: true,
        },
      });
    },
    addNum() {
      this.num++;
    },
    reduceNum() {
      if (this.num == 1) {
      } else {
        this.num--;
      }
    },
    addCart() {
      this.currentCommodity.properties = this.selectedAttribute;
      this.currentCommodity.selected = true;
      this.currentCommodity.count = this.num;
      this.$store.dispatch("addCart", this.currentCommodity);
      this.$emit("toDetail", {});
    },
    isexist(item, list) {
      let index = -1;
      for (var i = 0; i < list.length; i++) {
        if (list[i].commodityName == item.commodityName) {
          console.log("找到商品", list[i]);
          index = i;
          break;
        }
      }
      return index;
    },
    close() {
      this.$emit("toDetail");
    },
    getAttributeByIds() {
      let formData = new FormData();
      formData.append("attributeIds", this.currentCommodity.attributeIds);
      commodityApi.getAttributeByIds(formData).then((response) => {
        var data = response.data.data;
        this.keys = Object.keys(data);
        this.attributes = data;
        this.keys.forEach((key) => {
          for (var i = 0; i < this.attributes[key].length; i++) {
            if (i == 0) {
              this.attributes[key][i].selected = true;
            } else {
              this.attributes[key][i].selected = false;
            }
          }
        });
        this.$nextTick(() => {
          this.initSiderScroll();
        });
      });
    },
    //点击属性选择按钮
    selectAttribute(value, item) {
      for (var i = 0; i < this.attributes[item].length; i++) {
        this.attributes[item][i].selected = false;
      }
      for (var i = 0; i < this.attributes[item].length; i++) {
        if (this.attributes[item][i].value == value) {
          this.attributes[item][i].selected = true;
          this.reflashAttribute();
          break;
        }
      }
    },
    reflashAttribute() {
      var a = this.keys;
      this.keys = [];
      this.keys = a;
    },
  },
};
</script>

<style scoped>
.detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 12;
}
.icons {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 3rem;
  right: 0.5rem;
}
.iconItem {
  margin-right: 0.3rem;
  margin-top: 0.3rem;
  line-height: 0.7rem;
  height: 0.7rem;
  width: 0.7rem;
  text-align: center;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  opacity: 0.25;
}
.icon-size11 {
  margin-right: -0.2rem;
  margin-left: 0.1rem;
}
.icon-font {
  font-size: 12px;
}
.swipe {
  width: 100%;
  height: 30%;
  border-radius: 10px;
}
.swipe img {
  width: 100%;
  height: 100%;
  z-index: inherit;
  border-radius: 10px;
}
.sku {
  width: 100%;
  height: 48%;
  padding: 0.3rem 0.5rem;
  box-sizing: border-box;
  border-bottom: 1px solid #e1e1e1;
  overflow: hidden;
}
.wrapper {
  width: 100%;
  /* min-height: 3rem; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.states {
  display: flex;
  flex-direction: column;
}
.sku .title {
  font-size: 16px;
  margin-bottom: 0.2rem;
}
.sku .desc {
  font-size: 12px;
  color: grey;
  margin-bottom: 0.2rem;
}
.sku .state {
  font-size: 12px;
  color: grey;
  margin: 0.3rem 0 0.2rem 0;
}
.state_items {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-bottom: 0.2rem;
}
.state_item {
  min-width: 0.9rem;
  height: 0.8rem;
  line-height: 0.8rem;
  border-radius: 5px;
  text-align: center;
  background-color: #f5f5f7;
  color: #333;
  padding: 0 0.3rem;
  margin: 0 0.3rem 0.3rem 0;
  box-sizing: border-box;
}
.state_item_active {
  background-color: #f8eeea;
  color: #dba871;
}
/* 产品热评 */
.evaluate {
  display: flex;
  flex-direction: column;
}
.evaluate_card {
  display: flex;
  flex-direction: row;
  margin-top: 0.3rem;
  min-height: 2rem;
}
.evaluate_card .left {
  width: 1rem;
  display: flex;
  flex-direction: column;
}
.evaluate_card .right {
  width: 9rem;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e1e1e1;
}
.evaluate_card .right .header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 0.6rem;
  line-height: 0.6rem;
  margin-bottom: 0.3rem;
  font-size: 12px;
}
.evaluate_card .right .header .name {
  display: flex;
  flex-direction: row;
}
.evaluate_card .right .header .up {
  display: flex;
  flex-direction: row;
}
.evaluate_card .right .header .up span {
  margin-right: 0.15rem;
}
.evaluate_card .right .content {
  margin-bottom: 0.3rem;
  box-sizing: border-box;
  padding-right: 0.5rem;
}
.evaluate_card .right .imgs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
  box-sizing: border-box;
  padding-right: 0.5rem;
}
::v-deep .van-image {
  margin-right: 0.2rem;
  margin-bottom: 0.2rem;
}
::v-deep .van-image__img {
  border-radius: 5px;
}
::v-deep .van-rate {
  align-items: center;
  margin-left: 0.1rem;
}
.add_sku {
  width: 100%;
  height: 22%;
  /* background-color: #fff; */
  display: flex;
  flex-direction: column;
  padding: 0.3rem 0.5rem;
  box-sizing: border-box;
}
.price_num {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 1.2rem;
}
.price_num_left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
  color: grey;
}
.price_num_left span {
  font-size: 18px;
  color: #dba871;
}
.price_num_right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
}
.price_num_right .round {
  margin-top: 0.3rem;
  margin-left: 0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 100%;
  line-height: 0.6rem;
  text-align: center;
}
.price_num_right .reduce {
  border: 1px solid #e1e1e1;
  color: grey;
}
.price_num_right .add {
  background-color: #dba871;
  color: #fff;
}
.price_num_right .num {
  margin-left: 0.3rem;
  line-height: 1.2rem;
  font-size: 16px;
  color: #333;
}
.add_sku .btn {
  font-size: 14px;
  color: #fff;
  width: 100%;
  border-radius: 3px;
  height: 1rem;
  background-color: #dba871;
  margin-top: 0.3rem;
  text-align: center;
  line-height: 1rem;
}
</style>